// 注意 hook 在使用之前需要引入

import React, { useState, useEffect } from 'react';

// 定义函数组件

export default function IncreasingTodoList() {

  // 创建 count 状态及其对应的状态修改函数

  const [count, setCount] = useState(0);

  // 此处的定位与 componentDidMount 和 componentDidUpdate 相似

  useEffect(() => {

    // 每次 count 增加时，都增加对应的待办项

    const todoList = document.getElementById("todoList");

    const newItem = document.createElement("li");

    newItem.innerHTML = `我是第${count}个待办项`;

    todoList.append(newItem);

  });

  // 编写 UI 逻辑

  return (

    <div>

      <p>当前共计 {count} 个todo Item</p>

      <ul id="todoList"></ul>

      <button onClick={() => setCount(count + 1)}>点我增加一个待办项</button>

    </div>

  );

}
